<template>
	<view class="audioBox">
		 <view class="audio-bar">
		 	<!-- 左侧播放按钮 -->
		 	<view class="play-btn" @click="togglePlay">
		 		<u-icon :name="isPlaying ? 'pause-circle-fill' : 'play-circle-fill'" size="36px" color="#4C604E" />
		 	</view>
		 
		 	<!-- 时间显示 -->
		 	<view class="time-box">
		 		<text>{{ currentTimeStr }}</text>
		 		<text class="divider"> / </text>
		 		<text>{{ durationStr }}</text>
		 	</view>
		 
		 	<!-- 进度条部分 -->
		 	<view class="progress-box">
		 		<view class="progress-track">
		 			<view class="progress-fill" :style="{ width: progress + '%' }"></view>
		 		</view>
		 		<slider class="progress-slider" :value="progress" min="0" max="100" @changing="onSliderChanging"
		 			@change="onSliderChange" block-size="16" activeColor="transparent" backgroundColor="transparent" />
		 	</view>
		 
		 	<!-- 音量调节 -->
		 	<view class="volume-box">
		 		<u-icon name="volume" color="#4C604E" size="16px" />
		 		<slider class="volume-slider" :value="volume * 100" min="0" max="100" step="1" @changing="onVolumeChanging"
		 			@change="onVolumeChange" block-size="14" activeColor="#999" backgroundColor="#D9D9D9" />
		 	</view>
		 </view>
	</view>
	
</template>

<script>
	export default {
		name: 'CustomAudioBar',
		props: {
			src: {
				type: String,
				required: true
			},
			autoplay: {
				type: Boolean,
				default: false
			},
			loop: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				audio: null,
				isPlaying: false,
				duration: 0,
				currentTime: 0,
				progress: 0,
				isDragging: false,
				volume: 1 // 默认音量 1（最大）
			}
		},
		computed: {
			durationStr() {
				return this.formatTime(this.duration)
			},
			currentTimeStr() {
				return this.formatTime(this.currentTime)
			}
		},
		mounted() {
			this.initAudio()
		},
		beforeUnmount() {
			this.destroyAudio()
		},
		methods: {
			initAudio() {
				this.audio = uni.createInnerAudioContext()
				this.audio.src = this.src
				this.audio.autoplay = this.autoplay
				this.audio.loop = this.loop
				this.audio.volume = this.volume

				this.audio.onCanplay(() => {
					setTimeout(() => {
						this.duration = this.audio.duration || 0
					}, 400)
				})

				this.audio.onTimeUpdate(() => {
					if (!this.isDragging) {
						this.currentTime = this.audio.currentTime
						this.duration = this.audio.duration
						this.progress = this.duration ? (this.currentTime / this.duration) * 100 : 0
					}
				})

				this.audio.onPlay(() => {
					this.isPlaying = true
					this.$emit('play')
				})
				this.audio.onPause(() => {
					this.isPlaying = false
					this.$emit('pause')
				})
				this.audio.onEnded(() => {
					this.isPlaying = false
					this.progress = 100
					this.$emit('ended')
					if (!this.loop) this.audio.seek(0)
				})
				this.audio.onError(err => {
					console.error('Audio Error:', err)
					this.$emit('error', err)
				})
			},

			togglePlay() {
				if (!this.isPlaying) {
					this.audio.play()
				} else {
					this.audio.pause()
				}
			},

			onSliderChanging(e) {
				this.isDragging = true
				this.progress = e.detail.value
				this.currentTime = (this.progress / 100) * this.duration
			},

			onSliderChange(e) {
				this.isDragging = false
				const val = e.detail.value
				const seekTime = (val / 100) * this.duration
				this.audio.seek(seekTime)
				this.currentTime = seekTime
			},

			onVolumeChanging(e) {
				this.volume = e.detail.value / 100
				this.audio.volume = this.volume
			},
			onVolumeChange(e) {
				this.volume = e.detail.value / 100
				this.audio.volume = this.volume
				this.$emit('volumeChange', this.volume)
			},

			formatTime(sec) {
				if (!sec) return '00:00'
				let m = Math.floor(sec / 60)
				let s = Math.floor(sec % 60)
				return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
			},

			destroyAudio() {
				if (this.audio) {
					this.audio.stop()
					this.audio.destroy()
					this.audio = null
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.audioBox {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #5B5651;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 30rpx;
		z-index: 9;
	}
	.audio-bar {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 120rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
		flex-wrap: wrap;
		gap: 10rpx;
	}

	.play-btn {
		margin-right: 20rpx;
	}

	.progress-box {
		position: relative;
		flex: 1;
		height: 10rpx;
		display: flex;
		align-items: center;
	}

	.progress-track {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 14rpx;
		background-color: #e5e5e5;
		border-radius: 3rpx;
		transform: translateY(-50%);
	}

	.progress-fill {
		height: 14rpx;
		background-color: #D9D9D9;
		border-radius: 3rpx;
	}

	.progress-slider {
		position: absolute;
		width: 100%;
		top: 50%;
		transform: translate(0, -50%);
		margin: 0;
	}

	.time-box {
		display: flex;
		align-items: center;
		// margin-left: 10rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #4C604E;
		margin-right: 30rpx;
	}

	.divider {
		margin: 0 4rpx;
		color: #999;
	}

	.volume-box {
		display: flex;
		align-items: center;
		width: 180rpx;
		margin-left: 20rpx;
	}

	.volume-slider {
		flex: 1;
		margin-left: 6rpx;
	}
</style>